<template>
  <div style="padding-top:1.5rem;">
    <div>
      <TopNav title="ProfileDetailPageBAK.grxx" show_left="true"></TopNav>
      <nut-row type="flex" gutter="10" align="left">
        <nut-col :span="24" style="margin-bottom:0.3rem;">
          <div style="text-align: center;">
            <nut-textinput
              v-model="user_data.realname"
              label="$t('ProfileDetailPageBAK.zsxm')："
              placeholder="$t('ProfileDetailPageBAK.qsrnr')"
              :clearBtn="true"
              :disabled="false"
            />
          </div>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="left">
        <nut-col :span="24" style="margin-bottom:0.3rem;">
          <div style="text-align: center;">
            <nut-textinput
              v-model="user_data.id_card"
              label="$t('ProfileDetailPageBAK.sfzh')："
              placeholder="$t('ProfileDetailPageBAK.qsrnr')"
              :clearBtn="true"
              :disabled="false"
            />
          </div>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="left">
        <nut-col :span="24" style="margin-bottom:0.3rem;">
          <div style="text-align: center;">
            <nut-textinput
              v-model="user_data.nickname"
              label="$t('ProfileDetailPageBAK.hyc')："
              placeholder="$t('ProfileDetailPageBAK.qsrnr')"
              :clearBtn="true"
              :disabled="false"
            />
          </div>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="left">
        <nut-col :span="8"style="margin-bottom:1rem;">
        {{ $t('ProfileDetailPageBAK.scsfz') }}
          <div v-if="user_data.img_qrcode">
            <img @click="handleClickReview($api_url.server+user_data.img_qrcode)" class="row-img" :src="$api_url.server+user_data.img_qrcode" alt="">
          </div>
        </nut-col>
        <nut-col :span="12"style="margin-bottom:0.3rem;text-align: left;">
          <nut-imagepicker
            @imgMsg="uploadQrcode"
            :width="60"
            :height="60"
            :max="1"
          >
          </nut-imagepicker>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="left">
        <nut-col :span="8"style="margin-bottom:0.3rem;">
          {{ $t('ProfileDetailPageBAK.sfzzm') }}
          <div v-if="user_data.img_card1">
            <img @click="handleClickReview(user_data.img_card1.indexOf('http')>=0?user_data.img_card1:$api_url.server+user_data.img_card1)" class="row-img" :src="$api_url.server+user_data.img_card1" alt="">
          </div>
        </nut-col>
        <nut-col :span="12"style="margin-bottom:1rem;text-align: left;">
          <nut-imagepicker
            @imgMsg="uploadIdCard1"
            :width="60"
            :height="60"
            :max="1"
          >
          </nut-imagepicker>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="left">
        <nut-col :span="8"style="margin-bottom:1rem;">
          {{ $t('ProfileDetailPageBAK.sfzfm') }}
          <div v-if="user_data.img_card2">
            <img @click="handleClickReview(user_data.img_card2.indexOf('http')>=0?user_data.img_card2:$api_url.server+user_data.img_card2)" class="row-img" :src="$api_url.server+user_data.img_card2" alt="">
          </div>
        </nut-col>
        <nut-col :span="12"style="margin-bottom:1rem;text-align: left;">
          <nut-imagepicker
            @imgMsg="uploadIdCard2"
            :width="60"
            :height="60"
            :max="1"
          >
          </nut-imagepicker>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="left">
        <nut-col :span="12" :offset="5" style="margin-bottom:0.3rem;">
          <nut-button
            block
            v-if="user.verify_detail==-1"
            :disabled="loading"
            @click="handleClickSave"
          >{{ $t('ProfileDetailPageBAK.bcbtj') }}</nut-button>
          <span v-else-if="user.verify_detail==0">{{ $t('ProfileDetailPageBAK.ddsh') }}...</span>
          <span v-else>{{ $t('ProfileDetailPageBAK.yrz') }}👌</span>
        </nut-col>
      </nut-row>
      <nut-actionsheet :is-visible="showImgReview"
                       @close="handleClickCloseReview"
      >
        <div slot="custom" class="custom-wrap">
          <div class="img-review" v-if="curr_img">
            <img :src="curr_img" alt="">
          </div>
        </div>
      </nut-actionsheet>
    </div>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";

export default {
  name: 'ProfileDefailPage',
    components: {MainNav,TopNav},
    data () {
    return {
        loading:false,
        curr_img:'',
        showImgReview:false,
        user:{},
      user_data:{
          realname:'',
          id_card:'',
          nickname:'',
          img_qrcode:'',
          img_card1:'',
          img_card2:'',
          file_qrcode:'',
          file_card1:'',
          file_card2:'',
      },
    }
  },
    methods:{
        shiftTab(index){

        },
        uploadQrcode(args){
            this.user_data.file_qrcode = args.msg[0];
        },
        uploadIdCard1(args){
            this.user_data.file_card1 = args.msg[0];
        },
        uploadIdCard2(args){
            this.user_data.file_card2 = args.msg[0];
        },
        handleClickSave(){
            if(this.user_data.realname != "" ||
                this.user_data.id_card != "" ||
                this.user_data.nickname != "" ||
                this.user_data.file_qrcode != "" ||
                this.user_data.file_card1 != "" ||
                this.user_data.file_card2 != ""
            ){
                this.loading = true;
                let param = new FormData();
                param.append("realname",this.user_data.realname);
                param.append("nickname",this.user_data.nickname);
                param.append("id_card",this.user_data.id_card);
                param.append("file_qrcode",this.user_data.file_qrcode);
                param.append("file_card1",this.user_data.file_card1);
                param.append("file_card2",this.user_data.file_card2);
                this.$axios.post(this.$api_url.save_profile_detail,param,{
                    headers: { "Content-Type": "multipart/form-data" }
                }).then((res)=>{
                    if(res.data.code === 0){
                        this.$toast.success(res.data.msg);
                        this.getData();
                    } else{
                        this.$toast.fail(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$toast.fail(err.message);
                }).then(()=>{
                    this.loading = false
                })
            }
        },
        getData(){
            this.$axios.get(this.$api_url.user).then((res)=>{
                let data = res.data;
                this.user = data;
                this.user_data.nickname = data.nickname;
                this.user_data.realname = data.realname;
                this.user_data.id_card = data.id_card;
                this.user_data.img_card1 = data.img_card1;
                this.user_data.img_card2 = data.img_card2;
                this.user_data.img_qrcode = data.img_qrcode;
            })
        },
        handleClickReview(url){
            this.curr_img = url;
            this.showImgReview = true;
        },
        handleClickCloseReview(){
            this.showImgReview = false;
        }
    },
    mounted() {
      this.getData();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #app{
    margin-top:0;
  }
  .empty-box ul{
    padding:0;
    margin:0;
    list-style: none;
  }
  .empty-box ul li{
    margin-bottom:1rem;
  }
  .row-img{
    width:2rem;
    height:2rem;
    border:thin dashed #ccc;
    padding:0.2rem;
    border-radius: 0.2rem;
  }
  .img-review{
    padding: 1rem;
  }
  .img-review img{
    max-height:6rem;
    max-width:10rem;
  }
</style>
